<template>
	<view class="dots-wrap line-center">
		<view class="dots-item" :class="[activeIndex == index ?'dots-item-act':'']" v-for='(item,index) in list' :key="index"></view>
	</view>
</template>

<script>
	export default {
		name:"swiper-dots",
		props:{
			list:Array,
			activeIndex:Number
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
	.dots-wrap{
		width: 100%;
		position: absolute;
		bottom: 16rpx;
		.dots-item{
			width: 12rpx;
			height: 12rpx;
			background: rgba(255,255,255,0.6);
			border-radius: 100%;
			margin-right:8rpx;
			&:last-of-type{
				margin-right: 0;
			}
		}
		.dots-item-act{
			width: 33rpx;
			height: 12rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
		}
	}
</style>